<!DOCTYPE html>
<html>
	<head>
		<title>Colspans in the DataTable</title>
		<link rel="stylesheet" href="../../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../../common/samples.css">
		<script src="../../common/testdata.js" type="text/javascript" charset="utf-8"></script>
        <style>
        .highlight{
            background-color:#edf4f9;
            font-weight:bold;
        }
    </style>
	</head>
	<body>
		<div class='header_comment'>Colspans in the DataTable</div>
		<div id="testA"></div>

		<script type="text/javascript" charset="utf-8">
		webix.ready(function(){
			webix.ui({
				container:"testA",
				view:"datatable",

				columns:[
					{ id:"country",	header:"Country", width:100 },
					{ id:"title", 	header:"Film title" ,width:200},
					{ id:"year",	header:"Released" , width:80 ,tooltip: "", editor:"text"},
					{ id:"votes",	header:"Votes", 	width:100 },
                    { id:"rating",	header:"Rating", 	width:100 }
				],
                spans:true,
                select:"cell",
				autoheight:true,
				autowidth:true,
				data:{
                    data:[
                        { id:1, title:"The Shawshank Redemption", country: "USA", year:1994, votes:678790, rating:9.5, rank:1},
                        { id:2, title:"The Godfather", country: "USA", year:1972, votes:511495, rating:9.2, rank:2},
                        { id:3, title:"The Godfather: Part II", country: "USA", year:1974, votes:319352, rating:9.0, rank:3},
                        { id:"sub1", $css:"highlight", country:"Highest Rating", rating:9.5},
                        { id:4, title:"The Good, the Bad and the Ugly", country: "Italy", year:1966, votes:213030, rating:8.9, rank:4},
                        { id:5, title:"The Star Maker", country: "Italy", year:1995, votes:164558, rating:7.9, rank:5},
                        { id:"sub2", $css:"highlight", country:"Highest Rating", rating:8.9},
                        { id:6, title:"Amelie", country:"France", year:2001, votes:533848, rating:8.5, rank:6},
                        { id:7, title:"The Intouchables", country:"France", year:2011, votes:352058, rating:8.6, rank:7},
                        { id:8, title:"Van Gogh", country:"France", year:1991, votes:352058, rating:7.4, rank:8},
                        { id:"sub3", $css:"highlight", country:"Highest Rating", rating:8.6}
                    ],
                    spans:[//id, column, width, height, value, css
                            [1, "country", 1, 3],
                            [4, "country", 1, 2],
                            [6, "country", 1, 3],
                            ["sub1", "country", 4, 1, null, "highlight"],
                            ["sub2", "country", 4, 1, "", "highlight"],
                            ["sub3", "country", 4, 1, "", "highlight"]
                    ]
                }
			});				
		});
		</script>
	</body>
</html>